<template>
  <div class="readtype">
    <v-header :back-display="true" :path="path">
      <div slot="title">翻译训练</div>
    </v-header>

    <div class="title">
      <p>选择题目类型</p>
    </div>
    <div class="box" v-show="show">
      <div class="box-con">
        <v-selected
          label="题库分类"
          placeholder="点击选择题库"
          v-model="topic"
          :columns="columns1"
          :option="{label:'name',value:'id'}"
          @confirm="confirm1">
        </v-selected>
        <v-selected
          label="目标分类"
          placeholder="点击选择目标"
          v-model="target"
          :columns="columns2"
          :disabled="isdisabled2"
          :option="{label:'name',value:'id'}"
          @confirm="confirm2">
        </v-selected>
        <v-selected
          label="题型分类"
          placeholder="点击选择题型"
          v-model="subject"
          :columns="columns3"
          :disabled="isdisabled3"
          :option="{label:'name',value:'id'}"
          @confirm="confirm3">
        </v-selected>
        <div class="clearfix btn">
          <van-button type="info" @click="toTrain('trans')">进入训练</van-button>
        </div>
      </div>
    </div>


  </div>


</template>

<script>
import header from '@/components/main/header'
import selected from '@/components/content/selected'
import { Field, Button, Toast } from 'vant';
import api from '../../../api/api'

export default {
  name: 'readtype',
  components: {
    "v-header": header,
    "v-selected": selected,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
  },
  data () {
    return {
      path:'home',
      show:false,
      roleId: '',//用户登录的角色id
      isdisabled2:true,  //目标分类是否禁用
      isdisabled3:true,  //题型分类是否禁用
      topic: '', // 题库默认选中的索引值
      columns1: [],  // 如果可选数据不是label-value,需要配置下option
      target: '', // 目标默认选中的值
      columns2: [],
      subject: '', // 题型默认选中的值
      columns3: [],
      formlist:{  // 进入训练传入一个对象
        topic:'',
        target:'',
        subject:'',
        teacherid:''
      }
    }
  },
  created () {
    this.getTopic()
    this.roleId=this.$route.params.roleid//用户登录的角色id
    console.log('3',this.roleId)
  },
  computed: {},
  methods: {
    // 获取三级联动
    getTopic(){
      Toast.loading({message: '加载中...', forbidClick: true});
      api.Read().then(res=>{
        Toast.clear()
        this.show = true
        console.log('one',res)
        this.columns1 = res.result
      }).catch(error=>{
        console.log(error)
      })
    },

    // 题库分类
    confirm1 (data1, index, id) {
    // tips 正常获取值，用不到这个方法，用v-model获取值即可，这个方法是告诉你，可以获取任何你想要的数据
    // data1 当前这一条的obj数据
    // index 当前选择的索引
    // id 当前这一条数据的 value:id
      this.isdisabled2 = false
      this.isdisabled3 = true
      // 题库分类的内容
      this.formlist.topic = this.columns1[index].name
      console.log(data1, '当前索引1:', index, '当前id1:' ,id)
      api.Readtwo(id).then(res=>{
        console.log('two',res)
        // 数组对象赋值
        this.columns2 = res.result
      }).catch(error=>{
        console.log(error)
      })
    },

    // 目标分类
    confirm2 (data1, index, id) {
      this.isdisabled3 = false
       // 目标分类的内容
      this.formlist.target = this.columns2[index].name
      console.log(data1, '当前索引2:', index, '当前id2:' ,id)
      api.Readthree(id).then(res=>{
        console.log('three',res)
        // 数组对象赋值
        this.columns3 = res.result
      }).catch(error=>{
        console.log(error)
      })
    },

    // 题型分类
    confirm3 (data1, index, id) {
       // 题型分类的内容
      this.formlist.subject = this.columns3[index].name
      console.log(data1, '当前索引3:', index, '当前id3:' ,id)
      this.formlist.teacherid = id
    },

    // 进入训练
    toTrain(type){
      if( !this.formlist.topic ){
        Toast('请选择题库分类');
      }else if( !this.formlist.target ){
        Toast('请选择目标分类');
      }else if( !this.formlist.subject ){
        Toast('请选择题型分类');
      }else{
        console.log('1',this.formlist.teacherid)
        console.log('2',type)
        api.Entrance(this.formlist.teacherid,type).then(res=>{
          console.log('four',res)
          console.log(res.result)
          if(!res){
            Toast('该分类无题目');
          }else{
            this.$router.push({path:'/translating',query:{teacherid:this.formlist.teacherid,type:type,roleid:this.roleId}})
          }
        }).catch(error=>{
          console.log(error)
        })
        console.log('提交三级联动',this.formlist)
        switch(this.formlist.subject){
          case "深度阅读":
            this.$router.push({path:'/deepread'})
            break;
          case "选词填空":
            this.$router.push({path:'/choosefill'})
            break;
          case "阅读匹配":
            this.$router.push({path:'/readmatch'})
            break;
          case "阅读简答":
            this.$router.push({path:'/readanswer'})
            break;
          case "阅读填空":
            this.$router.push({path:'/readfill'})
            break;
          case "段落匹配":
            this.$router.push({path:'/sectionmatch'})
            break;
        }
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.title{
  padding: 15px;
  p{color: #333;font-size: 16px;}
}
.box{
  margin: 0 15px;
  border: 1px dashed #BBBBBB;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  border-radius: 10px;
  .box-con{
    padding: 10px 0 45px;
  }
}
.btn{padding-right: 16px;padding-top: 20px;}
.van-button--info{
    background-color: #ff8333;
    border-color: #ff8333;
    font-size: 13px;
    float: right;
    height: 32px;
    line-height: 32px;
}
</style>
